<script setup lang="ts">
import veelidate from '@/plugins/validate/index';
import useLoginStore from '@/pinia/useLoginStore';

const { Form, Field, ErrorMessage } = veelidate;
const schema = {
  username: { required: true, min: 3, regex: /^[\u4E00-\u9FA5A-Za-z0-9_]+$/ },
  password: { required: true, min: 3 },
};

const LoginStore = useLoginStore();
const handleSubmit = (data: any) => {
  LoginStore.setUserInfo(data);
};
</script>

<template>
  <div class="relative flex">
    <div class="w-full md:w-1/2 text-white font-sans font-bold min-h-screen bg-white">
      <div class="min-h-screen h-full flex flex-col after:flex-1">
        <div class="flex-1"><i class="fa fa-shield text-3xl text-indigo-500 ml-9 mt-5"></i></div>
        <div class="w-full max-w-sm text-black text-4xl px-4 py-8 mx-auto -translate-y-8">
          <h2 class="mb-10 text-violet-600 home-animation0">登录<i class="fa fa-child ml-4 text-violet-600"></i></h2>
          <Form @submit="handleSubmit" :validation-schema="schema">
            <div class="mb-6 relative home-animation1">
              <label class="text-sm font-medium block">用户名</label>
              <Field
                name="username"
                label="用户名"
                type="text"
                placeholder="中文、英文、数字包括下划线"
                autocomplete="off"
                value="admin"
                class="text-sm text-gray-600 border w-full rounded-md py-2 px-2 outline-none border-gray-200 placeholder:text-sm focus:ring-2 ring-offset-1 ring-violet-500 duration-300 focus:border-white"
              />
              <ErrorMessage name="username" class="absolute left-2 -bottom-5 text-xs font-normal text-red-500" />
            </div>
            <div class="mb-6 relative home-animation2">
              <label class="text-sm font-medium block">密码</label>
              <Field
                name="password"
                label="密码"
                type="password"
                placeholder="请输入密码"
                autocomplete="off"
                value="37.2"
                class="text-sm text-gray-600 border w-full rounded-md py-2 px-2 outline-none border-gray-200 placeholder:text-sm focus:ring-2 ring-offset-1 ring-violet-500 duration-300 focus:border-white"
              />
              <ErrorMessage name="password" class="absolute left-2 -bottom-5 text-xs font-normal text-red-500" />
            </div>

            <button
              type="submit"
              class="shan home-animation3 w-full text-sm bg-violet-600 text-white tracking-widest10 py-3 px-4 my-5 rounded-md hover:bg-violet-500 duration-300"
            >
              登录
            </button>
            <div class="flex justify-center home-animation4">
              <i class="fa fa-weixin text-green-600"></i>
            </div>
          </Form>
          <div class="flex justify-between mt-5 home-animation5">
            <a href="#" class="text-sm text-gray-700 hover:underline hover:text-violet-600">找回密码</a>
            <a href="#" class="text-sm text-gray-700 hover:underline hover:text-violet-600">用户注册</a>
          </div>
        </div>
      </div>
    </div>

    <div class="md:w-1/2 hidden md:block absolute inset-y-0 right-0">
      <img src="@/assets/camylla.jpg" class="w-full h-full object-cover object-center" />
      <div class="w-56 h-56 absolute top-1/4 ml-8 left-0">
        <div class="upAndDown relative">
          <img src="@/assets/plane.png" class="w-52 absolute top-1/4 left-0 -translate-x-1/2" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@for $i from 0 through 5 {
  .home-animation#{$i} {
    opacity: 0;
    animation-name: bottom2TopOpacity;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-delay: calc($i/10) + s;
  }
}
</style>
